<template>
  <div class="home">
    <mu-appbar title="货车兄弟">
    </mu-appbar>
    <mu-text-field v-model="msg" hintText="请输入名字"/><br/>
    <h1 @click="doSomething">notice:{{ msg }}</h1>
    <router-link to="/todoList">todoList router</router-link><br/><br/>
    <router-link to="/ui">ui router</router-link><br/><br/>
  <router-link to="/fetch">fetch</router-link><br/><br/>
  <router-link to="/comment">comment</router-link><br/><br/>
	  <li><a href="localhost/apk/" target="_blank">ELM</a></li><br/><br/>
    <h1 v-text= "xxx"></h1>
    <h2 v-html= "xxx"></h2>
    <h2 v-if="ishow">v-if直接不渲染dom</h2>
    <h2 v-show="ishow">v-show代码有渲染,但是没有显示</h2>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      msg: '成都青桔科技有限公司',
      xxx: '<div>html文字显示</div>',
      ishow: true
    }
  },
  methods: {
    doSomething: function () {
      this.msg = this.msg + '->'
    }
  },
  watch: {
    'msg': function (val, oldvar) {
      console.log(val, oldvar)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mu-text-field{
    text-align:left;
  }
  .mu-appbar{
    margin-bottom:2rem;
  }
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
